<template>
    <div class="property_container">
        <Drawer
                :width="400"
                title="无穷大电源属性设置"
                :closable="false"
                v-model="showPropertyInfinitePowerSupply"
                @on-visible-change="propertyChangeHandler"
        >
            <Form :model="formItem" :label-width="90">
                <Tabs type="card">
                    <TabPane label="基本属性">
                        <FormItem label="field1">
                            <Input v-model="formItem.field1" readonly></Input>
                        </FormItem>
                        <FormItem label="field2">
                            <Input v-model="formItem.field2"></Input>
                        </FormItem>
                        <FormItem label="field3">
                            <Input v-model="formItem.field3"></Input>
                        </FormItem>
                        <FormItem label="field4">
                            <i-switch v-model="formItem.field4" size="large">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </i-switch>
                        </FormItem>
                        <FormItem label="field5">
                            <Slider v-model="formItem.field5"
                                    :step="10"></Slider>
                        </FormItem>
                        <FormItem label="field6">
                            <Input v-model="formItem.field6" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                                  placeholder="请填写备注..."></Input>
                        </FormItem>
                        <FormItem label="field7">
                            <Select v-model="formItem.field7" style="width:200px">
                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>



                      

                    </TabPane>
                    <TabPane label="Matlab属性">
                        <FormItem label="feild8">
                            <Input v-model="formItem.field8"></Input>
                        </FormItem>



                    </TabPane>
                    <TabPane label="Digsilent属性">


                    </TabPane>
                </Tabs>
            </Form>


        </Drawer>
    </div>

</template>
<script>
  import {Button, Drawer, Form, Input, Footer, Slider, Tabs, Select} from 'view-design';
  import {mapState} from 'vuex';

  export default {
    name: "IndexPropertyInfinitePowerSupply",
    components: {
      Button,
      Drawer,
      Form,
      Input,
      Footer,
      Slider,
      Tabs,
      Select
    },
    data() {
      return { //这里不是真正给store中index.js返回数据的代码
        formItem: {
          field1: '',
          field2: '',
          field3: '',
          field4: '',
          field5: '',
          field6: '',
          field7: '',
          field8: ''
                  },
          cityList: [
              {
                  value: '考虑',
                  label: '考虑'
              },
              {
                  value: '不考虑',
                  label: '不考虑'
              },
              {
                  value: '不指导',
                  label: '不指导'
              }
          ]

      }



    },
    computed: {
      ...mapState([
        'showPropertyInfinitePowerSupply',
      ])
    },
    methods: {
      propertyChangeHandler(status) {
        if (status) {
          // 开启时候从index.js里读取数据
          const {selectedNodeKey, selectedUUID, nodeProperty} = this.$store.state;
          console.log(nodeProperty[selectedUUID][selectedNodeKey])
          this.formItem = nodeProperty[selectedUUID][selectedNodeKey];

        } else {
          // 关闭时执行store中index.js中的closeProperty函数并传送formItem数据
          this.$store.commit('closeProperty', this.formItem)
        }
      }
    }
  }
</script>

<style>
    .property_container {
        min-width: 300px;
        min-height: 300px;
    }
</style>
